<template>
  <div>
    <a-card :bordered="false" title="跟进情况" :loading="loading1">
      <a-form :form="form" class="form">
        <a-row class="form-row">
          <a-col :lg="{ span: 12 }" :md="12" :sm="24">
            <a-form-item label="跟进状态">
              <a-radio-group @change="radioChange" name="radioGroup"  v-decorator="['situation',{initialValue:Number(formData.situation)}]">
                <a-radio :value="-1">跟进失败</a-radio>
                <a-radio :value="0"> 未跟进 </a-radio>
                <a-radio :value="1"> 跟进中 </a-radio>
                <a-radio :value="2"> 跟进完成 </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
            <a-col :lg="{ span: 12 }" :md="12" :sm="24">
            <a-form-item label="状态描述" >
                 <a-input
                v-for="(item,index) in reason_input" :key="index"
                v-show="form.situation == index"
                type="textarea"
                placeholder="请输入状态描述，用于返回给客户看"
                v-model="reason_input[index]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        
      </a-form>
    </a-card>

    <a-card
      class="card"
      :title="'沟通跟进情况'"
      :bordered="false"
      :loading="loading1"
      style="margin-top: 20px"
    >
      <FormEdit ref="followUp" :columns_="followUpColumn" :dataSource_="formData.followUp?JSON.parse(formData.followUp):[]"></FormEdit>
    </a-card>

    <footer-tool-bar>
      <a-button type="primary" @click="validate" :loading="loading2"
        >提交</a-button
      >
    </footer-tool-bar>
  </div>
</template>

<script>



const followUpColumn = [
  {
    title: "日期",
    dataIndex: "date",
    // dateType: "date",
    key: "date",
    width: "20%",
    scopedSlots: { customRender: "date" },
  },
  {
    title: "跟进情况",
    dataIndex: "remark",
    dateType: "textarea",
    key: "remark",
    width: "50%",
    scopedSlots: { customRender: "remark" },
  },
   {
    title: "跟进人",
    dataIndex: "followUp",
    dateType: "textarea",
    key: "followUp",
    width: "15%",
    scopedSlots: { customRender: "followUp" },
  }
  
];




import FormEdit from "@/components/form/FormEdit";
import FooterToolBar from "@/components/tool/FooterToolBar";
import {subscribeSelOne,subscribeEdit} from "@/services/subscribe"
// import TestClose from '@/utils/test'
// import TestClose from '@/main'

export default {
  name: "TeachingAdd",
  //   i18n: require('../i18n'),
  components: {
    // CollectionCreateForm: CollectionCreateForm,
    FooterToolBar: FooterToolBar,
    FormEdit: FormEdit,
  },
  data() {
    return {
     
      followUpColumn: followUpColumn,
      // phoneMessage: [],
      // dataSource:dataSource,
      // columns:columns,
      form: this.$form.createForm(this),
      formData:{},
      reason_input:{},
      visible: false,
      loading1: false, //分类
      loading2: false, //提交
      id:"",
      title: undefined,
    };
  },
  computed: {},
  async created() {
    this.id = this.$route.query.subscribe_id
     
  },
  watch:{
  "$route.query.subscribe_id": function () {
      let subscribe_id = this.$route.query.subscribe_id;
      if (subscribe_id && subscribe_id != this.id) {
        this.id = subscribe_id;
      }
      //重新调用请求数据的方法，刷新页面数据
    },
    async  id(newValue, oldValue) {
     this.loading1 = true
         let res = await subscribeSelOne({id:newValue})
         if(res.code == 200){
             this.formData = res.data
             this.formData['reason'] = this.formData['reason']?JSON.parse(this.formData['reason']):{}
             this.form.situation = this.formData.situation
             if(!this.formData.reason.hasOwnProperty(this.formData.situation)){
                this.formData.reason[this.formData.situation] = ''
             }
             this.reason_input = this.formData['reason']
            //  console.log(this.reason_input)
         }
         this.loading1 = false
       
    },
  },
  methods: {
    radioChange(e){
          let key = e.target.value
          if(!this.reason_input.hasOwnProperty(key)){
              this.reason_input[key] = ''
          }
          this.form.situation = key
    },

  
    /**
     * 打开分组弹窗
     */
    addItemShow() {
      // alert()
      this.visible = true;
    },
    /**
     * 关闭分组弹窗
     */
    handleCancel() {
      this.visible = false;
    },
    validate() {
      // alert()

      // console.log();
      const { form, $message, $refs, $router } = this;
      let this_ = this;
      form.validateFields((err) => {
        if (err) {
          $message.error("信息填写有误");
          return;
        } else {

          this.$confirm({
            title: "确定要编辑吗?",
            async onOk() {
              this_.loading2 = true;
              let formData = form.getFieldsValue();
              formData["followUp"] = JSON.stringify(
                $refs.followUp.getArray()
              ); //工商手机号
              formData['reason'] = JSON.stringify(this_.reason_input)
              let res = await subscribeEdit({ formData: formData,conditions:{id:this_.id} });
              if (res.code == 200) {
                $message.success(res.message);
              }
              this_.loading2 = false;
              this_.closeTabs.$emit("closeTabs");
              $router.push("/findShop/subscribe");
            },
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.aSelect {
  display: flex;
  width: 100%;
  justify-content: space-between;
  /* border: 1px solid red; */
  align-items: center;
}

.card {
  margin-bottom: 24px;
}

.form {
  .form-row {
    margin: 0 -8px;
    //    display: flex;
    // justify-content: space-between;
  }
  .ant-col-md-12,
  .ant-col-sm-24,
  .ant-col-lg-6,
  .ant-col-lg-8,
  .ant-col-lg-10,
  .ant-col-xl-8,
  .ant-col-xl-6 {
    padding: 0 8px;
  }
}
</style>
